<%@ include file="/common/taglibs.jsp"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<title>
	<fmt:message key="accountMenu.gradeAndPoint"/>
</title>

<content tag="position">
	<fmt:message key="accountMenu.point" />&gt; <b><fmt:message key="accountMenu.gradeAndPoint" /></b>
</content>

<form  method="get" action="${ctxPath}/customer/csShopPoint.html">
	<input type="hidden" name="doAction" value="defaultAction" />
	<div class="point_info">
		<div class="my_grade">
			<table border="0" cellspacing="0" cellpadding="0" class="point_table">
				<tr>
					<th><fmt:message key="membership.current"/>：</th>
					<td>
						<span class="grade${customer.membership.membershipLevel}_s">
							<b>${customer.membership.membershipName}</b>
						</span>
					</td>
				</tr>
				<tr>
					<th><fmt:message key="membership.next"/>：</th>
					<td>
						<c:if test="${not empty nextLevelMembership}">
							<span class="grade${nextLevelMembership.membershipLevel}_s">
								<b>${nextLevelMembership.membershipName}</b>
							</span>
						</c:if>
						
						<c:if test="${empty nextLevelMembership}">
							<fmt:message key="customerDetail.nextLevelMembership.empty"/>
						</c:if>
					</td>
				</tr>
				<tr>
					<th><fmt:message key="shopPoint.total"/>：</th>
					<td>
						<b>${customer.shopPoint.total }</b>
					</td>
				</tr>
			</table>
			
			
			<%---------------------------------start:级别图示 -------------------------%>
			<ul class="title clearfix"><li><fmt:message key="membership.pictShow"/></li></ul>
			<ul class="grade_img clearfix">
				<li style="cursor:default;">
					<span class="grade0"></span><br />
					<b><fmt:message key="membership.none"/></b><br />
					<i></i>
				</li>
				<c:forEach var="membershipItem" items="${membershipList}" varStatus="status">
					<li membershipId="${membershipItem.membershipId}" class="membershipClass 
						<c:if test="${customer.membership.membershipId != membershipItem.membershipId and status.last}">last</c:if> 
						<c:if test="${customer.membership.membershipId == membershipItem.membershipId and !status.last}">curr</c:if>
						<c:if test="${customer.membership.membershipId == membershipItem.membershipId and status.last}">last_curr</c:if>"
						<c:if test="${status.last}">isLast="true"</c:if>  >
						<span class="grade${membershipItem.membershipLevel}"></span><br />
						<b>${membershipItem.membershipName}</b><br />
						<i>${membershipItem.upgradeTips}</i>
					</li>
				</c:forEach>
			</ul>
			<%---------------------------------end:  级别图示 -------------------------%>
			
			<c:forEach var="membershipItem" items="${membershipList}" varStatus="status">
				<div class="membershipDesc" id="membershipDetail_${membershipItem.membershipId}"
				    <c:if test="${customer.membership.membershipId != membershipItem.membershipId}"> style="display:none;"</c:if>>
					<%---------------------------------start:会员权利及优惠 -------------------------%>
					<ul class="title clearfix"><li>“${membershipItem.membershipName}”<fmt:message key="membership.description.title"/></li></ul>
					<div class="desc">
						<p>
						<b><fmt:message key="membership.curr.title"/></b>:<br/>
						${membershipItem.membershipDetail}
						</p>
						<p>
						<b><fmt:message key="membership.next.title"/></b>:<br/>
						${membershipItem.upgradeTips}
						</p>
					</div>
				</div>	
			</c:forEach>
		</div>
	</div>
	
	<%---------------------------------start:积分历史 -------------------------%>
	<ul class="tab_05 clearfix">
		<li class="curr"><span><fmt:message key="shopPointHistory.title"/></span></li>
	</ul>
	<div>
		<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table_use_point">
			<tr>
				<th width="20%"><fmt:message key="shopPointHistory.createTime"/></th>
				<th width="10%"><fmt:message key="shopPointHistory.amount"/></th>
				<th width="70%"><fmt:message key="shopPointHistory.description"/></th>
			</tr>
			
			<c:forEach items="${shopPointHistoryList}" var="history" varStatus="status">
				<c:set var="class" value="class='even'" />
				<c:if test="${0 == status.index%2}" ><c:set var="class" value="class='odd'" /></c:if>
				<tr ${class}>
					<td><fmt:formatDate value="${history.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
					<td>${history.amount}</td>
					<td>
						${history.description}
					</td>
				</tr>
			</c:forEach>  
			<c:if test="${empty shopPointHistoryList}">
				<tr><td colspan="3"><fmt:message key="tables.noItemsDisplay"></fmt:message></td></tr>
			</c:if>	
		</table>
	</div>
	<div class="page_bottom clearfix">
		<div class="pagination">
			<%@ include file="../common/pagingOnly.jsp"%>
		</div>
	</div>		
	<%---------------------------------end:  积分历史 -------------------------%>		
</form>

<script type="text/javascript" defer>
$j(document).ready(function () {
	$j('li.membershipClass').each(function(){
		var membershipId = $j(this).attr("membershipId");	
		$j(this).bind('mouseover',{membershipId:membershipId},showMembershipDetail);
	});
});

//显示会员等级的详细信息
function showMembershipDetail(event){
	$j('li.membershipClass').removeClass("over").removeClass("last_over").removeClass("curr_over").removeClass("last_curr_over");
	if($j(this).attr("isLast")=="true"){
		if($j(this).hasClass("last_curr")){
			$j(this).addClass("last_curr_over");
		}else{
			$j(this).addClass("last_over");
		}
	}else{
		if($j(this).hasClass("curr")){
			$j(this).addClass("curr_over");
		}else{
			$j(this).addClass("over");
		}
	}	
	$j('div.membershipDesc').hide();
	$j('#membershipDetail_'+event.data.membershipId).show();
}
</script>
